<template>
	<view class="page-body">
		<view class="header ">
			<view class='imgbg_out' style="z-index: -1;" >
				<view class="innerbg">
				<image :src='BackgroundUrl' mode="aspectFill"></image>
				</view>
			</view>
			<!-- 头部-默认显示 -->
			<view class="before" >
				<view class='imgbg_inner'  :style="{ display: afterHeaderOpacity<1?'none':'block'}" >
					<view class="innerbg">
						<image :src='BackgroundUrl' mode="aspectFill"></image>
					</view>
				</view>
				<view class="aftera">
					<view class="status"></view>
					<view class="flex">
						<view class="back" @click.stop="goBack"><view class="icon xiangqian" ></view></view>
						<view class="middle" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }">{{ShopName}}</view>
						<view class="icon-btn" :style="{ opacity: afterHeaderOpacity, zIndex: afterHeaderzIndex }"  @click='bindFocusOn'>
							<view :class="['iconfont', IsFocus?'icon-foucs':'icon-unfocus']"></view>
							<view class="text"> {{IsFocus?'已关注':'关注'}}</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 100upx;"></view>
			<view class="shopMsg" :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex}">
				<view class='store' >
					<view class='floor1 flex'>
						<view class='img flex0'>
							<image :src='Logo'></image>
						</view>
						<view class=''>
							<view class='store-name' @click="goShopDec">{{ShopName}} <text class="icon xiangyou"></text></view>
							<view class='store-d'>
								<text class=''>{{ShopFavoritesCount}}收藏</text>
							</view>
						</view>
						<view class='store-focus' @click='bindFocusOn'>
							<text :class="['iconfont', IsFocus?'icon-foucs':'icon-unfocus']"></text><text> {{IsFocus?'已收藏':'收藏'}}</text>
						</view>
					</view>
				</view>
				<view class='storeContact flex' :style="{ opacity: 1 - afterHeaderOpacity, zIndex: beforeHeaderzIndex }">
				</view>
			</view>
		</view>
		<!-- 店铺商品 -->
		<view class="product">
			<view class="title">
				<view class="t-tab on">全部</view>
			</view>
			<goods :listData="listData"></goods>
			<load-more  :listnull="listnull" :loadtype="loadtype" text0="正在加载中..." text2=" " >
				<!-- <block slot="null">
					<view :style="{'height':winHeight}" >
						<defalut type="12" flexend="true"></defalut>
					</view>
				</block> -->
			</load-more>
		</view>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import {Pages} from '@/utils/utils.js';
	import defalut from '@/components/defalut.vue';
	import loadMore from '@/components/load-more.vue';
	import {pageLoad} from '@/utils/request.js';
	import goods from '@/components/goods.vue';
	var that;
	export default {
		data() {
			return {
				BackgroundUrl: "/static/img/q.jpg",
				Logo: "",
				ShopName: "店铺名称",
				ShopFavoritesCount: "100",
				IsFocus: false,
				//控制渐变标题栏的参数
				beforeHeaderzIndex: 11,//层级
				afterHeaderzIndex: 10,//层级
				beforeHeaderOpacity: 1,//不透明度
				afterHeaderOpacity: 0,//不透明度
				gid:"",
				sid:"",
				shopMsg:"",
				page:1,
				listData:[],
				loadtype:1,
				listnull:false,
				listLen:10,
				winHeight:this.$store.state.winHeight,
			}
		},
		onLoad(options){
			that = this;
			// this.gid = options.gid;
			this.bid = options.sid;
			this.getShopMsg()
			this.getGoodsList(true)
		},
		onShow() {
			this.getShopMsg()
		},
		methods: {
			getShopMsg(){
				return this.$https.POST({
					url:'/goods/merchandiseShop',
					data:{
						bid:that.bid,
					},
					success(res){
						that.Logo = res.data.business_logo;
						that.ShopName = res.data.name;
						that.ShopFavoritesCount = res.data.collect_num;
						that.sid = res.data.id;
						that.IsFocus = res.data.is_business
						that.shopMsg = res.data
					}
				})
			},
			/* 收藏店铺 */
			bindFocusOn(){
				if(this.IsFocus){
					this.$showToast('您已收藏');
					return true;
				}
				if(this.hasLogin){
					this.$https.POST({
						url:'/collect/collectGoods',
						data:{
							bid:that.sid,
							type:1
						},
						success(res){
							that.shopMsg.is_business = 1;
							that.IsFocus = that.IsFocus?false:true;
							that.ShopFavoritesCount++
						}
					})
				}else{
					this.$showToast("请先登录")
					setTimeout(function() {
						uni.navigateTo({
							url:"/pages/login/login"
						})
					}, 1000);
				}
			},
			goBack(){
				uni.navigateBack({
					delta:1
				})
			},
			getGoodsList(isReload){
				pageLoad({
					url:"/goods/goodsList",
					that: that,
					isReload: isReload,
					data:{
						business_id:that.bid
					},
					success(res){
						res.data.forEach((item)=>{
							item.loaded = false
						})
					}
				})
			},
			toGoods(e) {
				uni.navigateTo({
					url: '/pages/goods/goods'
				});
			},
			goShopDec(){
				// let shopMsg = encodeURIComponent(JSON.stringify(this.shopMsg));
				uni.setStorage({
					key:'shopmsg',
					data:this.shopMsg,
					success: () => {
						uni.navigateTo({
							url:"/pages/shopcenter/shopdetail"
						})
					}
				})
				
			}
		},
		onReachBottom(){
			this.getGoodsList(false)
		},
		onPageScroll(e){
			//导航栏渐变
			let tmpY = 60;
			e.scrollTop = e.scrollTop > tmpY ?60: e.scrollTop;
			this.afterHeaderOpacity = e.scrollTop * (1 / tmpY);
			this.beforeHeaderOpacity = 1 - this.afterHeaderOpacity;
			//切换层级
			this.beforeHeaderzIndex = e.scrollTop > 0 ? 10 : 11;
			this.afterHeaderzIndex = e.scrollTop > 0 ? 11 : 10;
		},
		computed:mapState({
			hasLogin(state){
				return state.hasLogin==""?false:true
			},
			hasNetwork(state){
				return state.isConnected
			}
		}),
		components:{
			defalut,
			loadMore,
			goods,
		}
	}
</script>

<style lang="scss">
	.shopTop {
		position: relative;
		overflow: hidden;
		color: #fff;
	}
	.aftera{padding: 0 4%;box-sizing: border-box;}
	.header {
		width: 100%; 
		color: #fff;
		overflow:hidden;
		.before{
			position: fixed; top: 0; z-index: 1;
			width: 100%;
			height: 100upx;
			transition: opacity 0.05s linear;
			.back {
				width:auto;
			
				align-items: center;
				flex-shrink: 0;
				.icon {
					width: 60upx;
					height: 60upx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 42upx;
				}
			}
			.middle {
				width: 100%;
				font-size: 32upx;
				height: 90upx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0 7%;
			}
			.icon-btn {
				width: 112upx;
				height: 80%;
				text-align: center;
				.iconfont {
					height: 50upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 36upx;
				}
				.text{font-size: 24upx;}
			}
		}
		.before {
			.back {
				.icon {
					color: #fff;
				}
			}
			.icon-btn {
				.icon {
					color: #fff;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 100%;
				}
			}
		}
		
	}
	.status {
		width: 100%;
		height: 0;
		/*  #ifdef  APP-PLUS  */
		height: var(--status-bar-height); //覆盖样式
		/*  #endif  */
	}
	.imgbg_out {
		width: 100%;
		position: fixed;
		left: 0; top:0;
		z-index: -1;
		.innerbg{
			position: absolute;
			top: 0; left: 0;
			height: 440upx;
			background: #666;
			width: 100%;
			image{height: 440upx;}
			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0,0,0,.5);
				z-index: 1;
			}
		}
	    image {
			width: 100%;
		}
		
	}
	.imgbg_inner{
		height: 100upx;
		/*  #ifdef  APP-PLUS  */
		height:calc( 100upx + var(--status-bar-height)) ; 
		/*  #endif  */
		overflow: hidden;
		width: 100%;
		position: fixed;
		left: 0;
		z-index: -1;
		.innerbg{
			position: absolute;
			top: 0; left: 0;
			height: 440upx;
			background: #666;
			width: 100%;
			image{height: 440upx;}
			&::before {
				content: "";
				display: block;
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				background: rgba(0,0,0,.5);
				z-index: 1;
			}
		}
		image {
			width: 100%;
		}
	}
	
	.shopMsg {
		width: 100%;
		box-sizing: border-box;
		padding: 0 4%;
		margin-top: 30upx;
	}
	.store {
		font-size: 28rpx;
		position: relative;
		margin-bottom: 30rpx;
	}

	.store .img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		overflow: hidden;
		background: #ccc;
		margin-right: 30rpx;
	}

	.store .img image {
		width: 100rpx;
		height: 100rpx;
	}

	.store .store-name {
		font-size: 32rpx;
		padding: 5rpx 0 10rpx;
		width: 400rpx;
		height: 40rpx;
		overflow: hidden;
	}
	.store .store-name .xiangyou{
		font-size: 28upx;color: #fff;
	}
	.store-d text {
		margin-right: 20rpx;
	}

	.store .mark {
		background: #ff5722;
		padding: 3rpx 5rpx;
		color: #fff;
		line-height: 1;
		font-size: 22rpx;
		border-radius: 7rpx;
	}

	.store-focus {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		font-size: 26rpx;
		background: $maincolor;
		line-height: 54rpx;
		padding: 0 15rpx;
		border-radius: 30rpx;
		width:130upx;
		text-align:center;
		.iconfont{margin-right: 6upx;}
	}

	.store-focus .icon-unfocus,
	.store-focus .icon-focus {
		font-size: 30rpx;
		margin-right: 6rpx;
	}

	.storeContact {
		justify-content: space-between;
		padding: 0 30rpx;
		line-height: 48rpx;
	}

	.storeContact .icon__locate,
	.icon-phone {
		font-size: 38rpx;
		padding-right: 5rpx;
	}

	.title {
		background: #FFFFFF; padding: 0 36upx;box-sizing: border-box;display: flex; flex:1; margin-bottom: 30upx;
		height: 88upx; line-height: 88upx;
		.t-tab{color: #333;font-size: 28upx;padding:0 20upx;box-sizing: border-box;height: 100%;}
		.t-tab.on{color: $maincolor;border-bottom: 4upx solid $maincolor;}
	}

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60upx;
		color: #979797;
		font-size: 24upx;
	}

	.product {
		background: #F6F6F6;
	}
	// .list{
	// 	background: #f6f6f6;
	// }
</style>
